<template>
  <a-button type="primary" @click="showModal">
    <plus-outlined />
    新建
  </a-button>
  <a-modal v-model:open="state.open" title="添加产品"
           :width="720"
           :mask-closable="false"
           :body-style="{padding:0,maxHeight:'400px',overflow:'hidden auto',position:'relative'}">
    <a-form ref="formRef" :model="form" name="productForm">
      <div class="form-head">
        <a-row :gutter="12">
          <a-col :span="8">产品名称</a-col>
          <a-col :span="5">分类</a-col>
          <a-col :span="3">售价</a-col>
          <a-col :span="3">进价</a-col>
          <a-col :span="4">单位</a-col>
        </a-row>
      </div>
      <a-row :gutter="12" class="padding-h-b" v-for="(item,index) in form.product">
        <a-col :span="8">
          <a-form-item :name="['product', index, 'name']"
             class="margin-none"
             :rules="{required:true,message:'名称不能为空'}">
            <a-input placeholder="请输入产品名称" v-model:value="item.name" show-count :maxlength="20" />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item :name="['product',index,'category_id']"
                       :rules="{required:true,message:'请选择产品分类'}"
                       class="margin-none">
            <a-select placeholder="选择产品分类"
                      show-search
                      :filter-option="filterOption"
                      allow-clear
                      class="width-max"
                      v-model:value="item.category_id">
              <a-select-option v-for="cate in categoryStore.categories" :value="cate.id" :name="cate.name">
                {{cate.name}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item :name="['product',index,'price']" class="margin-none"
                       :rules="{required:true,message:'请输入售价'}">
            <a-input-number class="width-max" :min="0" v-model:value="item.price" />
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item :name="['product',index,'cost_price']" class="margin-none">
            <a-input-number class="width-max" :min="0" v-model:value="item.cost_price" />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item :name="['product',index,'unit']" class="margin-none" :rules="{required:true,message:'请选择单位'}">
            <a-select class="width-max" v-model:value="item.unit">
              <a-select-option v-for="unit in unitStore.data" :key="unit.id" :value="unit.name">
                {{unit.name}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="1" class="flex-items-center">
          <a-button type="text" shape="circle" size="small" v-if="index>0" @click="removeRow(index)">
            <close-outlined class="font-size-sm"/>
          </a-button>
          </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <div style="padding: 4px 6px">
        <a-flex justify="space-between">
          <a-button type="dashed" @click="addRow"><plus-outlined/>新增行</a-button>
          <a-space>
            <a-button @click="onClose">取消</a-button>
            <a-button type="primary" @click="onSubmit" :loading="state.loading">提交保存</a-button>
          </a-space>
        </a-flex>
      </div>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import {reactive, ref,h} from 'vue';
import { PlusOutlined,CloseOutlined } from "@ant-design/icons-vue";
import { FormInstance } from 'ant-design-vue';
import useCategoryStore from "@/store/category";
import useUnitsStore from "@/store/units";
import {ProductItemType} from "@/types/product";
import {getRandom} from "@/plugin/useFn";
import {useUserStore} from "@/store/user";

const state = reactive({
  open: <boolean>false,
  loading: <boolean>false
})
const categoryStore = useCategoryStore(),
  unitStore = useUnitsStore(),
  useStore = useUserStore()


const formRef = ref<FormInstance>()

const form = reactive<{product:ProductItemType[]}>({product:[]})

const showModal = () => {
  state.open = true
  addRow()
}
const onClose = () => {
  formRef.value?.resetFields()
  state.open = false
}
const addRow = () => {
  form.product.push({
    id:getRandom(8),
    name: '',
    price: '',
    cost_price: '',
    category_id: '',
    unit: '',
    user_id: useStore.userInfo.id
  });
};
const removeRow = (index: number) => {
  form.product.splice(index, 1);
};
const filterOption = (input: string, option: any) => {
  return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}
const onSubmit = () => {
  formRef.value?.validate()
    .then(async () => {
      state.loading = true
    })
    .catch(err => console.log(err))

}
</script>
<style scoped>
.form-head {
  background-color: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  padding: 8px 24px;
  margin-bottom: 12px;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
</style>